<template>
  <div class="dashboard-container">
    <div class="app-container">
      <a-card class="tools-card">
        <a-button type="primary" @click="showDialog = true">新增员工</a-button>
      </a-card>
      <a-card>
        <a-table :columns="columns" :dataSource="list" :pagination="{
          current: pageParams.page,
          pageSize: pageParams.size,
          total: pageParams.total,
          onChange: changePage
        }">
          <!-- bodyCell是针对每个单元格的设置 -->
          <!-- column是列信息 -->
          <!-- v-bind:  :   v-on:  @  v-slot:  # -->
          <!-- <template v-slot:bodyCell="{ column }"> -->
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'staffPhoto'">
              <a-avatar :size="100" :src="record.staffPhoto || DefaultImg"></a-avatar>
            </template>
            <template v-if="column.dataIndex === 'operate'">
              <!-- 判断当前是操作列 -->
              <a-space>
                <a-button type="primary" @click="detailRow(record.id)">查看</a-button>
                <a-button type="danger" @click="delRow(record.id)">删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
  <!-- 传递一个变量 控制弹层的显示与否 -->
  <!-- v-model还会监听  update:showDialog -->
  <add-employee v-model:showDialog="showDialog" @addSuccess="getList"></add-employee>
  <card-employee v-model:showDetail="showDetail" :userId="userId"></card-employee>
  <!-- showDetail为false的时候- 弹层关闭的时候- useId直接设置为空 -->
  <!-- 解耦 -->
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import { getEmployeeList, delEmployee } from '@/api/employee'
import DefaultImg from '@/assets/default.png'
import { message, Modal } from 'ant-design-vue'
import AddEmployee from './components/add-employee.vue'
import CardEmployee from './components/card-employee.vue'
const showDialog = ref(false) // 控制弹层的显示

const showDetail = ref(false) // 控制查看弹层的显示
const userId = ref(null) // 控制当前点击的用户ID
const columns = [
  {
    title: '序号',
    customRender({ index }) {
      // 1页 1-10  2- 11-20
      // (page - 1 ) * size
      return (pageParams.page - 1) * pageParams.size + index + 1
    }
  },
  {
    title: '姓名',
    dataIndex: 'username'
  },
  {
    title: '头像',
    dataIndex: 'staffPhoto'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '工号',
    dataIndex: 'workNumber'
  },
  {
    title: '聘用形式',
    dataIndex: 'formaOfEmployment'
  },
  {
    title: '部门',
    dataIndex: 'departmentName'
  },
  {
    title: '入职时间',
    dataIndex: 'timeOfEntry'
  },
  {
    title: '操作',
    dataIndex: 'operate'
  }
]
const list = ref([]) // 声明响应式数据

// 声明页码响应式数据
const pageParams = reactive({
  page: 1,
  size: 10,
  total: 0
})

// dom完成渲染执行的钩子函数
onMounted(() => {
  getList()
})
// 获取员工数据
const getList = async () => {
  const close = message.loading("员工数据正在加载")
  const { total, rows } = await getEmployeeList(pageParams)
  list.value = rows
  pageParams.total = total // 赋值总数
  // 关闭弹层
  close()
}
// 切换页码事件
const changePage = (page, pageSize) => {
  pageParams.page = page
  pageParams.size = pageSize
  getList() // 重新拉取数据

}

// 查看员工的详情
const detailRow = (id) => {
  showDetail.value = true // 弹出查看层
  userId.value = id // 记录点击的用户id
}
// 当showDetail为false的时候 直接让userId设置为空
watch(showDetail, () => {
  if (!showDetail.value) {
    userId.value = null // 设置userId为空
  }
})

// 删除行的方法
const delRow = (id) => {
  Modal.confirm({
    title: '提示',
    content: '确定删除该员工吗',
    async onOk() {
      await delEmployee(id)
      message.success("删除员工成功")
      getList() // 重新拉取数据
    }
  })

}
</script>

<style scoped>
.app-container {
  padding: 16px;
}

.tools-card {
  margin-bottom: 16px;
}
</style>
